<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI分组测试页面</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .group-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .group-header {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }
        .group-icon {
            font-size: 2rem;
            margin-right: 15px;
        }
        .group-info {
            flex: 1;
        }
        .group-info h3 {
            margin: 0 0 5px 0;
            color: #333;
        }
        .group-info p {
            margin: 0;
            color: #666;
        }
        .group-toggle {
            margin-left: auto;
            padding: 10px;
        }
        .toggle-icon {
            font-size: 1.2rem;
            color: #667eea;
            transition: transform 0.3s ease;
        }
        .group-stats {
            display: flex;
            gap: 20px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .stat {
            text-align: center;
        }
        .stat-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
        }
        .stat-label {
            font-size: 0.9rem;
            color: #666;
        }
        .group-urls {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .urls-header h4 {
            color: #333;
            margin: 0 0 15px 0;
        }
        .urls-list {
            max-height: 400px;
            overflow-y: auto;
        }
        .url-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            margin-bottom: 8px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            transition: all 0.3s ease;
        }
        .url-item:hover {
            background: #e9ecef;
            border-color: #667eea;
        }
        .url-info {
            flex: 1;
            margin-right: 15px;
        }
        .url-title {
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 4px;
            word-break: break-word;
        }
        .url-link {
            color: #667eea;
            font-size: 0.9rem;
            margin-bottom: 6px;
            word-break: break-all;
        }
        .url-meta {
            display: flex;
            gap: 15px;
            font-size: 0.8rem;
            color: #718096;
        }
        .visit-count {
            background: #e6f3ff;
            color: #0066cc;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 0.8rem;
        }
        .btn:hover {
            background: #5a67d8;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .error {
            color: #e53e3e;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI分组测试页面</h1>
        <button onclick="loadGroups()" style="padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px;">加载分组数据</button>
        <div id="groupsContainer">
            <div class="loading">点击按钮加载分组数据</div>
        </div>
    </div>

    <script>
        // 加载分组数据
        async function loadGroups() {
            try {
                const response = await fetch('/api/ai-grouping/groups?versionId=5');
                const result = await response.json();
                
                if (result.code === 200) {
                    displayGroups(result.data);
                } else {
                    document.getElementById('groupsContainer').innerHTML = '<div class="error">加载失败：' + result.message + '</div>';
                }
            } catch (error) {
                document.getElementById('groupsContainer').innerHTML = '<div class="error">加载失败：' + error.message + '</div>';
            }
        }

        // 显示分组结果
        function displayGroups(groups) {
            const container = document.getElementById('groupsContainer');
            
            if (groups.length === 0) {
                container.innerHTML = '<p>暂无分组结果</p>';
                return;
            }

            container.innerHTML = groups.map((group, index) => 
                '<div class="group-card" data-group-id="' + group.id + '">' +
                    '<div class="group-header" onclick="toggleGroup(' + index + ')">' +
                        '<div class="group-icon">' + (group.icon || '📁') + '</div>' +
                        '<div class="group-info">' +
                            '<h3>' + group.name + '</h3>' +
                            '<p>' + (group.description || '无描述') + '</p>' +
                        '</div>' +
                        '<div class="group-toggle">' +
                            '<span class="toggle-icon">▼</span>' +
                        '</div>' +
                    '</div>' +
                    '<div class="group-stats">' +
                        '<div class="stat">' +
                            '<div class="stat-value">' + (group.urlCount || 0) + '</div>' +
                            '<div class="stat-label">网站数量</div>' +
                        '</div>' +
                        '<div class="stat">' +
                            '<div class="stat-value">' + Math.round((group.confidence || 0) * 100) + '%</div>' +
                            '<div class="stat-label">置信度</div>' +
                        '</div>' +
                    '</div>' +
                    '<div class="group-urls" id="group-urls-' + index + '" style="display: none;">' +
                        '<div class="loading">加载中...</div>' +
                    '</div>' +
                '</div>'
            ).join('');

            // 为每个分组加载URL列表
            groups.forEach((group, index) => {
                loadGroupURLs(group.id, index);
            });
        }

        // 切换分组展开/收起
        function toggleGroup(index) {
            const urlsContainer = document.getElementById('group-urls-' + index);
            const toggleIcon = document.querySelector(`#group-urls-${index}`).parentElement.querySelector('.toggle-icon');
            
            if (urlsContainer.style.display === 'none') {
                urlsContainer.style.display = 'block';
                toggleIcon.textContent = '▲';
            } else {
                urlsContainer.style.display = 'none';
                toggleIcon.textContent = '▼';
            }
        }

        // 加载分组URL列表
        async function loadGroupURLs(groupId, index) {
            try {
                const response = await fetch('/api/ai-grouping/assignments?groupId=' + groupId);
                const result = await response.json();
                
                const urlsContainer = document.getElementById('group-urls-' + index);
                
                if (result.code === 200 && result.data.length > 0) {
                    urlsContainer.innerHTML = 
                        '<div class="urls-header">' +
                            '<h4>分组网址 (' + result.data.length + '个)</h4>' +
                        '</div>' +
                        '<div class="urls-list">' +
                            result.data.map(url => 
                                '<div class="url-item">' +
                                    '<div class="url-info">' +
                                        '<div class="url-title">' + (url.title || '无标题') + '</div>' +
                                        '<div class="url-link">' + url.url + '</div>' +
                                        '<div class="url-meta">' +
                                            '<span class="visit-count">访问 ' + url.visitCount + ' 次</span>' +
                                            '<span class="last-visit">最后访问: ' + formatDate(url.lastVisit) + '</span>' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="url-actions">' +
                                        '<a href="' + url.url + '" target="_blank" class="btn">访问</a>' +
                                    '</div>' +
                                '</div>'
                            ).join('') +
                        '</div>';
                } else {
                    urlsContainer.innerHTML = '<div class="no-urls">该分组暂无网址</div>';
                }
            } catch (error) {
                console.error('加载分组URL失败：', error);
                const urlsContainer = document.getElementById('group-urls-' + index);
                urlsContainer.innerHTML = '<div class="error">加载失败：' + error.message + '</div>';
            }
        }

        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '未知';
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }
    </script>
</body>
</html>
